<template>
  <div style="display: flex; width: 100%">
    <el-slider
      style="flex-grow: 1"
      v-bind="$attrs"
      v-model="value"
      @input="onInput"
      :max="24"
      :min="0"
      :marks="{ '12': '' }"
      @change="$emit('onChange')"
    ></el-slider>
    <el-button
      icon="CircleClose"
      circle
      link
      @click="setToDefault(defaultValue)"
      style="margin-left: 10px"
    ></el-button>
  </div>
</template>

<script setup>
const props = defineProps(['modelValue', 'defaultValue'])
const emit = defineEmits(['update:modelValue'])

const value = ref(props.modelValue)
watch(
  () => props.modelValue,
  (v1, v2) => {
    value.value = v1
  }
)

function setToDefault(val) {
  emit('update:modelValue', val)
}

function onInput(e) {
  emit('update:modelValue', e)
  emit('input', e)
}
</script>

<style scoped></style>
